<template>
  <div class="appointInvite">
      <div class="top">
          <div class="back" @click="$router.back()">
              <yd-icon name="back" slot="icon" custom  size=".3rem" color="#FFffff"></yd-icon>
                    返回列表
          </div>
          <div class="title">

          </div>
          <div class="invite" @click="complited()">
              完成
          </div>
      </div>      
      <!-- 邀请列表 -->
      <div class="list">
         <yd-accordion >
            <yd-accordion-item title="邀请好友加入">
                 <yd-checklist v-model="checklist">
                    <yd-checklist-item :val="item.friendID" v-for="(item,n) in friend" :key="n">
                        <div class="userDetail">
                            <div class="left">
                                <img :src="item.user.photo" >
                            </div>
                            <div class="mid">
                                <p style="line-height:1rem" v-if="item.remark==''">{{item.user.name}}</p>
                                <p style="line-height:1rem" v-if="item.remark!=''">{{item.remark}}</p>
                            </div>
                        </div>
                    </yd-checklist-item>
                 </yd-checklist>
            </yd-accordion-item>       
         </yd-accordion>
        <!-- 邀请亲友 -->
         <yd-accordion>
            <yd-accordion-item title="邀请关注的人加入">
                 <yd-checklist v-model="checklist1">
                    <yd-checklist-item :val="item.attentionUserID" v-for="(item,n) in focus" :key="n">
                        <div class="userDetail" >
                            <div class="left">
                                <img :src="item.user.photo">
                            </div>
                            <div class="mid">
                                <p style="line-height:1rem" v-if="item.remark==''">{{item.user.name}}</p>
                                <p style="line-height:1rem" v-if="item.remark!=''">{{item.remark}}</p>
                            </div>
                        </div>
                    </yd-checklist-item>
                 </yd-checklist>                
            </yd-accordion-item>       
         </yd-accordion>  
      </div>            
  </div>
</template>
<script>
import { MessageBox } from 'mint-ui';
export default {
  data(){
      return{
          friend:[],//好友列表
          focus:[],//关注列表
          checklist:[],//选择内容
          checklist1:[],//选择内容
          ulist1:[],//好友数组          
          ulist2:[],//关注数组          
      }
  },
  computed:{
      whoJump(){
          return this.$store.state.choseGroup
      }
  },
  methods:{
      friendList(){//未加入的好友
          let data={
              userID:localStorage.userid,
              appointID:this.whoJump.appointID
          }
          this.ylAjax.noAppointFriend(data)
              .then(res=>{
                  for(let i=0;i<res.data.length;i++){
                       this.ulist1.push(res.data[i].friendID)
                  }
                  this.friend=res.data
              })
      },
      focusList(){//未加入的关注
          let data={
              userID:localStorage.userid,
              appointID:this.whoJump.appointID
          }
          this.ylAjax.noAppointFocus(data)
              .then(res=>{
                  for(let i=0;i<res.data.length;i++){
                      this.ulist2.push(res.data[i].attentionUserID)
                  }                
                  this.focus=res.data
              })
      },
      complited(){//完成，发起邀请
           let a= this.checklist.concat(this.checklist1);
           let n = [];
           let m=[];
            for(let i=0;i<a.length;i++){//数组去重
                if(n.indexOf(a[i])==-1){
                    n.push(a[i])
                }
            }
//再次判断是否选择用户是未添加用户
            this.friendList();
            this.focusList();
            let b=this.ulist1.concat(this.ulist2)
            // 数组去重
            for(let i=0;i<b.length;i++){//数组去重
                if(m.indexOf(b[i])==-1){
                    m.push(b[i])
                }
            }
            for(let i=0;i<n.length;i++){
                for(let j=0;j<m.length;j++){
                    if(n[i]!==m[j]){
                        n.slice(i,1)
                    }
                }
            }            
            var data={
                appointID:this.whoJump.appointID,
                userIDS:n.toString()
            } 
            this.ylAjax.createApplication(data)
                    .then(res=>{
                        if(res.data==0){
                            MessageBox.alert('已成功发送邀请，即将返回列表').then(action => {
                                this.$router.back()
                            });                             
                        }else if(data.userIDS.length==0){
                            MessageBox.alert('请至少选择一个好友或关注的人')
                        }else{
                            MessageBox.alert('抱歉：邀请发送失败，请稍后再试')
                        }
                    })         
         
      }
  },
  created(){
      this.friendList()
      this.focusList()
  }
}
</script>
<style lang="less" scoped>
  @import "~less/base";
    .appointInvite{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow-y: scroll;
      .top{//导航
          height: 1rem;
          line-height: 1rem;
          background-color: @background-a;
          display: flex;
          color: @color-t;
          font-size: .3rem;
          position: fixed;
          width: 100%;
          z-index: 10;
          .back{
              flex:0 0 30%;
              text-align: center;
          }
          .title{
              flex:0 0 40%
          }
          .invite{
              flex: 0 0 30%;
              text-align: center
          }
      }
      .list{//列表
        margin-top: 1rem;
        .userDetail{
            display: flex;
            height: 1.22rem;
            .left{
                flex: 0 0 20%;
                line-height: 1.22rem;
                img{
                    width: .8rem;
                    vertical-align: middle;
                    border-radius: 50%;
                }
            }
            .mid{
                flex: 0 0 60%
            }
        }
      }        
    }
</style>
